<template>
  <el-dialog :model-value="dialogVisible" :title="dialogDatas.title" :destroy-on-close="true" @close="closeDialog">
    <div>
      <el-input  :maxlength="200" v-model="msgContent" style="width: 100%;margin-top: 24px;" :rows="10" type="textarea" placeholder="请输入自动回复消息内容" />
    </div>
    <template #footer v-if="!(dialogDatas?.type == 'check')">
      <span class="dialog-footer" style="display: block;text-align: center;">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
      </span>
    </template>
    <template #footer v-if="(dialogDatas?.type == 'check')">
      <span class="dialog-footer" style="display: block;text-align: center;">
        <el-button @click="resetForm()">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref,} from 'vue';
import {
  replyPhraseAdd,
  replyPhraseEdit
}  from '@/api/automatic/index'
const emit = defineEmits(['updateList']);
const visible = ref(false);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dialogDatas: {
    type: Object,
    default: () => { }
  }
});
const msgContent = ref('')

const msgId = ref(null)

if(props.dialogDatas.datas){
msgContent.value = props.dialogDatas.datas.msgContent
msgId.value = props.dialogDatas.datas.id
}
//提交
const confirm = async () => {
  let Url = props.dialogDatas.type == 'add' ? replyPhraseAdd : replyPhraseEdit;
  if(!msgContent.value) {
    ElMessage.error('请输入模板内容')
    return
  }
  let res: any = await Url({id:msgId.value ,msgContent: msgContent.value});
  if(res.code===2000) {
    emit('updateList')
  }
}
// 取消&重置
const resetForm = () => {
  visible.value = false
  msgContent.value = ''
  emit('updateList')
}
// 关闭
const closeDialog = () => {
  msgContent.value = ''
  emit('updateList')
}
</script>

<style lang="scss" scoped>
.el-dialog__footer {
  text-align: center;
}

.avatar-uploader-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
}
</style>
